<template>
	<view class="content">
		<view class="address" @click="chooseAddress">
			<view class="address-icon">
				<image class="img" src="@/static/images/address.png" mode="widthFix">
				</image>
			</view>
			<view class="address-detali">
				<view class="user-info" v-if="userInfo.name && userInfo.name && userInfo.address">
					<view class="person">
						<view>收货人：{{ userInfo.name }}</view>
						<view>{{ userInfo.telNumber }}</view>
					</view>
					<view class="detail-address">地址：{{ userInfo.address }}</view>
				</view>
				<view class="no-data-box" v-else>
					<view class="no-data">
						<view class="null">无</view>
						<view class="place-text">请完善地址信息</view>
					</view>
					<view class="icon">
						<image class="img" src="@/static/images/right-grey.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="goods">
			<view class="goods-img">
				<image :src="goodsInfo.goods_img" mode="scaleToFill" style="width: 200rpx;height: 200rpx;"></image>
			</view>
			<view class="goods-describe">
				<view class="goods-title">
					{{ goodsInfo.goods_name }}
				</view>
				<view class="config">
					<div class="item">
						<view class="min-title">套餐：</view>
						<view class="detail">{{ goodsInfo.setmeal_title }}</view>
					</div>
					<view class="item">
						<view class="min-title">租期：</view>
						<view class="detail">{{ goodsInfo.lease_time }}</view>
					</view>
					<view class="item">
						<view class="min-title">数量：</view>
						<view class="detail">{{ goodsInfo.amount }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="payType">
			<view class="payType-pay flex">
				<view class="mode">付款方式</view>
				<view class="pay_type">
					微信支付
				</view>
			</view>
			<view class="payType-contact flex">
				<view class="mode">
					租赁方式
				</view>
				<view class="pay_type">
					{{ goodsInfo.pact_type }}
				</view>
			</view>
		</view>
		<view class="rent">
			<view class="rent-realPrice flex">
				<view class="rent-price">
					首期实付租金
				</view>
				<view class="text-color">
					￥{{ goodsInfo.pay_rent ? goodsInfo.pay_rent : goodsInfo.first_rent }}
				</view>
			</view>
			<view class="rent-bill">
				<view class="flex" style="margin-bottom: 10rpx;">
					<view class="">
						总租金
					</view>
					<view class="">
						￥{{ goodsInfo.total_rent }}(共{{ goodsInfo.total_num }}期)
					</view>
				</view>
				<view class="flex" style="margin-bottom: 10rpx;">
					<view class="">
						首期租金
					</view>
					<view class="">
						￥{{ goodsInfo.first_rent }}(第1期)
					</view>
				</view>
				<view class="flex" style="margin-bottom: 10rpx;">
					<view class="">
						剩余租期
					</view>
					<view class="">
						￥{{ goodsInfo.last_rent }}(共{{ goodsInfo.last_term }}期){{activity}}
					</view>
				</view>
				<view class="flex" style="margin-bottom: 10rpx;" v-if="activity">
					<view class="text-color text-bold">
						{{ goodsInfo.activity_title }}
					</view>
					<view class="text-color text-bold" @click="handleCoupon">
						领券>
					</view>
				</view>
				<view class="flex" style="margin-bottom: 10rpx;" v-if="goodsInfo.activity_title">
					<view class="text-color text-bold">
						优惠抵扣
					</view>
					<view class="text-color text-bold">
						￥{{ goodsInfo.pay_code }}
					</view>
				</view>
			</view>
			<view class="rent-billDetails">
				<view class="" @click="toLeaseDetail">
					<text>租期详情</text>
					<text style="font-size: 20rpx;color: #FF7E16; margin-left: 20rpx;">自定义租期，每期租金金额不同</text>
				</view>
			</view>
		</view>
		<view class="delivery-method">
			<view class="payType-pay flex myPadding">
				<view>
					<text>商品押金</text>
					<text style="font-size: 20rpx;color: #FF7E16; margin-left: 20rpx;">芝麻信用最高可全免</text>
				</view>
				<view class="grey">￥{{ goodsInfo.foregift }}</view>
			</view>
			<view class="payType-contact flex  bottom-border myPadding">
				<view>预估到期买断尾款</view>
				<view class="grey">￥{{ goodsInfo.buyout_price }}</view>
			</view>
			<view class="payType-contact flex myPadding">
				<view>配送方式</view>
				<view class="grey">{{ goodsInfo.convey_type }}</view>
			</view>
		</view>
		<view class="other">
			<!-- <view class="payType-pay flex">
				<view class="" @click="toRealName">
					<text>实人认证</text>

				</view>
				<view class="">
					已认证
				</view>
			</view> -->
			<!-- <view class="payType-contact myPadding bottom-border">
				<view class="flex1">
					<text>邮&nbsp;&nbsp; 箱：</text>
					<input type="text" v-model="email" style="width: 450rpx;" placeholder="请输入您的邮箱" />
				</view>
			</view> -->
			<view class="payType-contact myPadding bottom-border">
				<view class="flex1">
					<text>备&nbsp;&nbsp; 注：</text>
					<input type="text" v-model="text" style="width: 450rpx;" placeholder="请输入您对本次订单的交易说明" />
				</view>
			</view>
			<!-- <view class="payType-contact myPadding bottom-border">
				<view class="flex1">
					<text>学&nbsp;&nbsp; 历：</text>
					<picker @change="bindPickerChange" :value="arrIndex" :range="educationList">
						<view class="uni-input">{{educationList[arrIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="payType-contact myPadding bottom-border">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="width: 50%;display: flex;">
						<view style="width: 120rpx;">联系人：</view>
						<picker @change="bindPickerChange1" :value="arrIndex1" :range="contactsList1">
							<view class="uni-input">{{contactsList1[arrIndex1]}}</view>
						</picker>
					</view>
					<view class="flex">
						<view style="width: 100rpx;">姓名：</view>
						<input type="text" v-model="direct_line_name" style="width: 140rpx;" placeholder="联系人姓名" />
					</view>
				</view>
				
			</view>
			<view class="payType-contact myPadding bottom-border">
				<view class="flex1">
					<text>联系人：</text>
					<input type="number" v-model="direct_line_tel" style="width: 450rpx;" placeholder="平台不会与联系人联系" />
				</view>
			</view>
			<view class="payType-contact myPadding bottom-border">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="width: 50%;display: flex;">
						<view style="width: 120rpx;">联系人：</view>
						<picker @change="bindPickerChange2" :value="arrIndex2" :range="contactsList2">
							<view class="uni-input">{{contactsList2[arrIndex2]}}</view>
						</picker>
					</view>
					<view style="display: flex;">
						<view style="width: 100rpx;">姓名：</view>
						<input type="text" v-model="not_direct_line_name" style="width: 140rpx;" placeholder="联系人姓名" />
					</view>
				</view>
				
			</view>
			<view class="payType-contact myPadding">
				<view class="flex1">
					<text>联系人：</text>
					<input type="number" v-model="not_direct_line_tel" style="width: 450rpx;" placeholder="平台不会与联系人联系" />
				</view>
			</view> -->
			<!-- <view class="payType-contact myPadding bottom-border">
				<view class="flex1">
					<text>工作单位：</text>
					<input type="text" v-model="work_unit" style="width: 450rpx;" placeholder="请输入您的工作单位" />
				</view>
			</view>
			<view class="payType-contact myPadding">
				<view class="flex1">
					<text>工作地址：</text>
					<input type="text" v-model="work_address" style="width: 450rpx;" placeholder="请输入您的工作地址" />
				</view>
			</view> -->
		</view>
		<view class="bottom-button">
			<view style="font-size: 25rpx;">
				<label class="radio">
					<radio color="#f52120" value="r1" :checked="checked" @click="checkRadio" />
				</label>
				我同意调用数字证书签署<text @click="openAgree" style="color: #2892FF;">"租赁服务相关文件及协议"</text>
			</view>
			<view class="button flex">
				<view>
					共1件，首期实付：
					<text class="text-color">
						￥{{ goodsInfo.pay_rent ? goodsInfo.pay_rent : goodsInfo.first_rent }}
					</text>
				</view>
				<view class="order-btn" :class="{active:getButtonClass()}" @click="clickHandler">
					去免租
				</view>
			</view>
		</view>
		<!-- 二维码 -->
		<!-- <uni-popup ref="payCode" type="bottom" border-radius="10px 10px 0 0">
			<view class="pay-code" :class="{active:payCode,bg}">
				<view class="chunk" @click="closeBg"> </view>
				<qr-code :qrcode_url="qrcode_url"></qr-code>
			</view>			
		</uni-popup> -->
		<payCode ref="payCode" :imgUrl="qrcode_url"></payCode>
		<van-popup :show="show" closeable="true" position="bottom"
			custom-style="height: 80%; border-radius: 30rpx 30rpx 0 0; padding: 30rpx 20rpx;" @close="closePopup">
			<view class="">优惠券领取</view>
			<!-- <my-discount :discountList="discountList"></my-discount> -->
			<view class="discount-container">
				<!-- 每一张优惠券 -->
				<view class="discount-item" v-for="(item, index) in discountList" :key="item.id">
					<!-- 优惠券左边部分 -->
					<view class="item-left">
						<view class="">
							￥{{item.money}}
						</view>
						<view class="">
							{{ item.title }}
						</view>
					</view>
					<!-- 优惠券右边部分 -->
					<view class="item-right">
						<view class="item-right-top">
							<view class="typeCoupon">
								{{item.is_code == 1?(item.is_code==3?'首月租金券':'平台满减券'):'首月租金券'}}
							</view>
							<view class="">
								可用于部分商品
							</view>
						</view>
						<view class="item-right-center">
							<view class="center">{{ item.info }}</view>
						</view>
						<view class="item-right-top">
							<view>有效期至</view>
							<view>{{item.end_at}}</view>
						</view>
						<view class="item-right-bottom">
							<view class="bottom-left">{{ item.bottom_left }}</view>
							<view :class="[item.is_have === 2 ? 'bottom-right' : 'bottom-right-have']"
								@click="getDiscount(item.is_have, index)">{{ item.is_have === 1 ? '去使用' : '立即领取'}}</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		makeOrder,
		getGoodsInfo,
		confirmOrder
	} from '@/api/order'
	import { checkPhone } from '@/utils/validate.js'
	import payCode from '@/components/payCode/payCode.vue'
	export default {
		components: { payCode },
		data() {
			return {
				payCode: false,
				goods_id: null,
				amount: 1,
				setmeal_id: null,
				spec_id: null,
				activity: [],
				checked: false,
				type: 'primary',
				email: '',
				text: '',
				bg: false,
				goodsInfo: {}, //商品信息
				userInfo: {
					name: '',
					address: '',
					telNumber: ''
				},
				qrcode_url: "",
				memberInfo: {},
				isLoading: false,
				show: false,
				discountList: [],
				arrIndex: 0,
				arrIndex1: 0,
				arrIndex2: 0,
				educationList: ['请选择学历信息', '研究生及以上', '本科', '专科', '高中及以下'],
				contactsList1: ['请选择关系', '父母', '兄妹'],
				contactsList2: ['请选择关系', '同事', '朋友'],
				work_address: '',
				work_unit: '',
				education: '',
				contacts: '',
				contacts_tel: '',
				direct_line_name: '',
				not_direct_line_name: '',
				direct_line_tel: '',
				not_direct_line_tel: ''
			}
		},
		onLoad(options) {
			this.goods_id = options.id
			this.amount = options.amount
			this.setmeal_id = options.setmeal_id
			this.spec_id = options.spec_id
			this.activity = options.activity
			this.getOrder()
			getGoodsInfo({
				goods_id: this.goods_id,
				activity_id: this.activity
			}).then(res => {
				this.discountList = res.activity
			})

		},
		beforeDestroy(){
			this.qrcode_url = ""
		},
		methods: {
			// 选择学历
			bindPickerChange(e) {
				console.log(e);
				this.arrIndex = e.detail.value
			},
			// 选择联系人1
			bindPickerChange1(e) {
				this.arrIndex1 = e.detail.value
				console.log(this.contactsList1[this.arrIndex1],'111');
			},
			// 选择联系人2
			bindPickerChange2(e) {
				console.log(e);
				this.arrIndex2 = e.detail.value
			},
			// 领券
			handleCoupon() {
				this.show = !this.show
			},
			// 关闭
			closePopup() {
				this.show = false
				// this.activity=''
				this.getOrder()
			},
			// 不使用优惠券
			getDiscount(is_have, index) {
				this.show = false
				this.getOrder()
			},
			closeBg() {
				this.bg = false;
				setTimeout(() => {
					this.payCode = false
				}, 300)
			},
			getButtonClass() {
				return this.checked ;
			},
			//选择地址
			chooseAddress() {
				console.log('1');
				uni.chooseAddress({
					success: (res) => {
						const address =
							`${res.provinceName}-${res.cityName}-${res.countyName + res.detailInfo}`
						this.userInfo = {
							name: res.userName,
							telNumber: res.telNumber,
							address
						}
					},
					fail: (res) => {
						console.log(res);
					},
					complete: (res) => {
						console.log('all',res);
					}
				})
			},
			// 勾选已读
			checkRadio() {
				this.type = this.checked ? "warn" : "primary"
				this.checked = !this.checked
			},
			openAgree() {
				uni.navigateTo({
					url: "/pagesA/my/agreement/agreement"
				})
			},
			// 租期详情
			toLeaseDetail() {
				uni.navigateTo({
					url: `/pagesA/my/order/makeOrder/leaseDetail?goods_id=${ this.goods_id }&amount=${ this.amount }&setmeal_id=${ this.setmeal_id }&spec_id=${ this.spec_id }&img=${ this.goodsInfo.goods_img }`
				})
			},
			getGoodsQrCode() {
				this.payCode = true;
				setTimeout(() => {
					this.bg = true;
				}, 450)
				uni.showLoading({
					title: "Loading",
					mask: true,
				})
				// const data = uni.getStorageSync("toAlipay");
				let param = {
					goods_id: this.goods_id,
					goods_name: this.goodsInfo.goods_name
				}
				this.isLoading = true;
				uni.$http.get('/Wechat/Order/toAlipay', param)
				// uni.$http.get('/Wechat/Order/toAlipay', data)
					.then(res => {
						const {
							qrcode_url
						} = res.data.data;
						this.qrcode_url = qrcode_url;
						this.$refs.payCode.open()
					}).finally(()=>{
						uni.hideLoading();
						this.isLoading = false;
					})
			},
			clickHandler() {
				if (!this.checked) return uni.$showMsg('您还未签署数字证书')
				if (
					!this.userInfo.address &&
					!this.userInfo.name &&
					!this.userInfo.telNumber
				) return uni.$showMsg('请输入地址信息');
				/** 去免租弹出支付宝二维码
				if (this.isLoading) return;
				if(this.qrcode_url==="") this.getGoodsQrCode();
				else this.$refs.payCode.open()
				 */
				if (this.isLoading) return;
				let arr = this.userInfo.address.split('-')
				let param = {
					goods_id: this.goods_id,
					setmeal_id: this.setmeal_id,
					spec_id: this.spec_id,
					amount: this.amount,
					email: this.email,
					remark: this.text,
					activity_id: '',
					prov: arr[0],
					city: arr[1],
					area: arr[2],
					mobile: this.userInfo.telNumber,
					realname: this.userInfo.name,
					address: this.userInfo.address,
					order_from: 'wechat2',
					scene: getApp().globalData.scene,
					educationList: '',
					contactsList1: '',
					contactsList2: '',
					direct_line_name: '',
					not_direct_line_name: '',
					direct_line_tel: '',
					not_direct_line_tel: ''
				}
				this.isLoading = true;
				uni.showLoading({
					title: "Loading",
					mask: true,
				})
				makeOrder(param).then(res => {
					uni.navigateTo({
						url: `/pagesB/authentication/authentication?cradName=${ this.memberInfo.cert_name }&goodsId=${ this.goods_id }&setmealId=${ this.setmeal_id }&specId=${ this.spec_id }&amount=${ this.amount }&activityId=${ this.activity }&orderId=${ res.order_id }`
					})
				}).finally(() => {
					uni.hideLoading();
					this.isLoading = false;
				})
			},
			// 获取订单详情
			async getOrder() {
				let params = {
					goods_id: this.goods_id,
					amount: this.amount,
					setmeal_id: this.setmeal_id,
					spec_id: this.spec_id,
					order_from: 'wechat2',
					activity_id: this.activity
				}
				//	console.log(params)
				// const {
				// 	data: res
				// } = await uni.$http.post('/Wechat/Order/confirmOrder', params);
				confirmOrder(params).then(res => {
					this.goodsInfo = res
					this.memberInfo = res.user
					/* 是这里的问题 */
					this.goodsInfo.goods_img = getApp().globalData.baseImg + this.goodsInfo.goods_img
					if (this.goodsInfo.pay_type === 1) {
						this.goodsInfo.pay_type = '智能合同代扣'
					} else if (this.goodsInfo.pay_type === 2) {
						this.goodsInfo.pay_type = '支付宝预授权'
					} else {
						this.goodsInfo.pay_type = '花呗分期支付'
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.discount-container {
		padding: 0 15rpx;
	}

	.typeCoupon {
		font-size: 20rpx;
		color: white;
		font-weight: 400;
		background-color: red;
		height: 40rpx;
		width: 120rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.discount-item {
		display: flex;
		width: 100%;
		height: 180rpx;
		margin-top: 30rpx;
		box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15);
	}

	.item-left {
		background-color: red;
		color: #fff;
		width: 30%;
		border: 1px solid red;
		border-radius: 20rpx 0 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item-right {
		background-color: #fff;
		width: 70%;
		display: flex;
		font-size: 25rpx;
		flex-direction: column;
		justify-content: space-around;
		align-items: stretch;
	}

	.item-right-top {
		display: flex;
		padding: 5rpx;
		margin-top: 20rpx;
	}

	.item-right-bottom {
		display: flex;
		justify-content: space-between;
	}

	.top-left {
		font-size: 20rpx;
		color: #fff;
		background-color: red;
		border: 1px solid red;
		border-radius: 10rpx;
	}

	.bottom-right {
		background-color: red;
		color: #fff;
		border: 1px solid red;
		border-radius: 20rpx;
		padding: 8rpx;
	}

	.bottom-right-have {
		background-color: #fff;
		color: red;
		border: 1px solid red;
		border-radius: 20rpx;
		padding: 8rpx;
		position: relative;
		left: -20rpx;
		top: -20rpx;
	}

	.order-btn {
		border-radius: 40rpx;
		color: white;
		background-color: #c1c1c1;
		width: 230rpx;
		text-align: center;
		font-size: 32rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;

		&.active {
			background-color: #f05251;
		}
	}

	.grey {
		color: #999;
		font-size: 28rpx;
	}

	.myPadding {
		padding: 20rpx 0 !important;
	}

	.bottom-border {
		border-bottom: 1rpx solid #d4d4d4;
	}

	.content {
		font-size: 30rpx;
		padding: 20rpx;

		.address {
			background-color: #fff;
			min-height: 120rpx;
			border-radius: 10rpx;
			display: flex;
			padding: 20rpx 40rpx;
			align-items: center;

			.address-icon {
				margin-right: 20px;

				.img {
					width: 30rpx;
				}
			}

			.no-data-box {
				display: flex;
				justify-content: space-between;
				width: 580rpx;

				.no-data {
					.place-text {
						margin-top: 10rpx;
						color: #999;
					}
				}

				.icon {
					.img {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

			.address-detali {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 580rpx;
				font-size: 28rpx;

				.user-info {
					width: 100%;

					.person {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}


	.flex {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.flex1 {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex1 input {
		margin-left: 15rpx;
		width: 60%;
	}

	.goods {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		flex-flow: row;
		justify-content: start;
		padding: 10rpx;

		.goods-describe {
			padding: 10rpx;

			.goods-title {
				font-weight: bold;
			}

			.config {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				margin-top: 10rpx;

				.item {
					display: flex;
					color: #999;

					.min-title {
						white-space: nowrap;
					}

					&:nth-of-type(2) {
						margin: 5rpx 0;
					}
				}
			}
		}
	}

	.payType {
		border-radius: 10rpx;
		margin-top: 20rpx;
		background-color: #fff;

		.payType-pay {
			padding: 20rpx;
			border-bottom: 1rpx solid #d4d4d4;
		}

		.payType-contact {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.pay_type {
			color: #999;
			font-size: 28rpx;
		}
	}





	.rent {
		font-size: 28rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.rent-realPrice {
			.rent-price {
				font-size: 30rpx;
			}
		}

		.rent-bill {
			font-size: 25rpx;
			background-color: #eee;
			padding: 20rpx;
			color: #999;
			margin: 20rpx 0;
		}
	}

	.delivery-method {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 0 20rpx;

		.payType-pay {
			border-bottom: 1rpx solid #d4d4d4;
		}
	}

	.other {
		font-size: 28rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		height: auto;
		background-color: #fff;
		padding: 0 20rpx;
		margin-bottom: 150rpx;
	}

	.bottom-button {
		padding-top: 20rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 150rpx;
		background-color: #fff;
		z-index: 99;
		padding-left: 15rpx;
		padding-right: 15rpx;
		box-sizing: border-box;
	}

	.bottom-button .button {
		font-size: 25rpx;
	}

	.bottom-button .button button {
		border-radius: 30rpx;
		background-color: #d4d4d4;
	}

	.text-color {
		color: red;
	}

	.text-bold {
		font-weight: bold;
	}

	.pay-code {
		width: 100vw;
		height: 100vh;
		position: fixed;
		bottom: 0;
		z-index: 99999;
		box-sizing: border-box;
		transform: translateY(100%);
		transition: all .5s;

		&.bg {
			background-color: rgba(0, 0, 0, .2);
		}

		.chunk {
			height: 25vh;
			width: 100vw;
			// background-color: rgba(0, 0, 0, .2);
		}

		&.active {
			transform: translateY(0);
		}
	}
</style>